import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import axios from '../../axiosConfig';
import { deciphering, encryption } from '../../util/Util.js';
export default function Login(props) {
  const [messageApi, contextHolder] = message.useMessage();
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }

  const onFinish = (values) => {
    axios.get("/user/login?username=" + values.username + "&password=" + encryption(values.password) + "&type=2").then(res => {

      if (res.data.code === "200") {
        localStorage.setItem("userInfo", encryption((JSON.stringify({ "id": res.data.data.id, "username": res.data.data.username, "role": res.data.data.role, "createtime": new Date().getTime(), "tokenname": res.data.token.split(",")[0] }))))
        props.history.push("/question/train")
        axios.get("/user/save?userId=" + res.data.data.id).then(res => {
          if (res.data === "200") {
            messageApi.open({
              type: 'warning',
              content: '正在获取试题！',
            });
          }
        })
      } else {
        messageApi.open({
          type: 'warning',
          content: '用户名和密码不匹配！',
        });
      }
    })
  };

  return (
    <div style={{ display: 'flex', justifyContent: "center", alignItems: "center", height: "80vh", margin: "0" }}>
      {contextHolder}
      <div >
        <div style={{ fontSize: "30px", fontWeight: "bold", textAlign: "center", marginBottom: "30px", }}>
          训练服务系统
        </div>
        <div style={{ padding: "30px 30px 5px 30px", border: "1px solid #f0f0f0" }}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            >
              <Input style={{ width: "300px" }} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>

            <Form.Item>
              <Button style={{ width: "300px", marginTop: "15px" }} type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>

      </div>

    </div>

  )
}
